<template>
  <div id="box">
    <h1>大屏</h1>
    <div class="item1">333</div>
  </div>
</template>

<script>
let instance = null;
function initScale(defaultBox = { width: 1920, height: 1080 }) {
  function handleScale() {
    let deviceWidth;
    let deviceHeight;
    console.log("1211111111", document.getElementById("main_juan"));
    let main_Route = document.getElementById("main_juan");
    if (main_Route) {
      let rect = main_Route.getBoundingClientRect();
      deviceWidth = rect.width;
      deviceHeight = rect.height;
    } else {
      deviceWidth = document.documentElement.clientWidth;
      deviceHeight = document.documentElement.clientHeight;
    }

    let { width, height } = defaultBox;
    console.log("width", width);
    console.log("deviceWidth", deviceWidth);
    console.log("height", height);
    console.log("deviceHeight", deviceHeight);
    console.log("clientWidth:", main_Route.clientWidth);

    let scaleX = deviceWidth / width;
    let scaleY = deviceHeight / height;
    let fontSize = Math.min(scaleX, scaleY);
    console.log("1rem =", fontSize, "px");
    document.documentElement.style.fontSize = fontSize + "px";
    //居中
    // let container = document.getElementById("box");
    let container = document.getElementById("box");
    console.log("container", container);

    console.log("fontSize", fontSize);
    let rect = container.getBoundingClientRect();
    let moveX = (deviceWidth - rect.width) / 2;
    let moveY = (deviceHeight - rect.height) / 2;
    console.log("moveX", moveX);

    // if (main_Route) {
    //   container.style.top = "50%";
    //   container.style.left = "50%";
    //   container.style.transform = "translate(-50%, -50%)";
    // } else {
    //   container.style.top = "0";
    //   container.style.left = "0";
    //   container.style.transform = `translate(${moveX}px, ${moveY}px)`;
    // }
  }

  function debounce(fn, delay = 300) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout((_) => {
        fn();
        setTimeout((_) => {
          location.reload();
        }, 300);
      }, delay);
    };
  }

  handleScale();
  window.addEventListener("resize", debounce(handleScale, 300));
}
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
    this.$nextTick(() => {
      requestAnimationFrame(() => {
        initScale();
      });
    });
  },
};
</script>

<style scoped lang="scss">
#box {
  background: linear-gradient(90deg, #e988e1, #2c96dd);
  width: 1920rem;
  height: 1080rem;
  position: absolute;

  .item1 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 24rem;
  }
}
</style>
